```html
<script setup>
  import * as signaturePad from "@zag-js/signature-pad"
  import { useMachine, normalizeProps } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(signaturePad.machine, { id: "1" })

  const api = computed(() => signaturePad.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()">Signature Pad</label>

    <div v-bind="api.getControlProps()">
      <svg v-bind="api.getSegmentProps()">
        <path
          v-for="(path, i) of api.paths"
          :key="i"
          v-bind="api.getSegmentPathProps({ path })"
        />
        <path
          v-if="api.currentPath"
          v-bind="api.getSegmentPathProps({ path: api.currentPath })"
        />
      </svg>

      <button v-bind="api.getClearTriggerProps()">X</button>

      <div v-bind="api.getGuideProps()" />
    </div>
  </div>
</template>
```
